<template>
  <div class="container">
    <!-- <xy-table :columns="columns" :api="api"></xy-table> -->
    <el-row :gutter="20" class="table-header">
      <!-- 添加 -->
      <el-col :span="12" class="add-item">
        <el-button @click="onAdd">
          <i class="el-icon-plus"></i>
          {{ $language.local("添加") }}</el-button
        >
        <el-dialog
          :title="$language.local(addForm.id ? '修改' : '添加')"
          :visible.sync="addDialogVisible"
          width="60%"
        >
          <el-form
            ref="dlgFormRef"
            :model="addForm"
            label-width="100px"
            status-icon
            class="grid-flex"
          >
            <template v-for="(value, key) in addForm">
              <template v-if="key === 'nav_type'">
                <!-- <span :key="key"></span> -->
              </template>
              <template v-else-if="key === 'id'"></template>
              <template v-else-if="key === 'channel_id'"></template>
              <template v-else-if="key === 'is_sys'"></template>
              <template v-else-if="key === 'auths'"></template>
              <template v-else-if="key === 'children'"></template>
              <template v-else-if="key === 'parent_id'">
                <el-form-item
                  :key="key"
                  :label="$language.local(key)"
                  :prop="key"
                >
                  <el-select v-model="addForm[key]" clearable>
                    <el-option
                      v-for="item in menus"
                      :key="item.id"
                      :value="item.id"
                      :label="item.title"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </template>
              <template v-else-if="key === 'is_lock'">
                <el-form-item
                  :key="key"
                  :label="$language.local(key)"
                  :prop="key"
                >
                  <el-switch
                    v-model="addForm[key]"
                    :active-value="1"
                    :inactive-value="0"
                  ></el-switch>
                </el-form-item>
              </template>
              <el-form-item
                v-else
                :key="key"
                :label="$language.local(key)"
                :prop="key"
              >
                <xy-input v-model="addForm[key]" clearable></xy-input>
              </el-form-item>
            </template>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button @click="addDialogVisible = false">{{
              $language.local("取消")
            }}</el-button>
            <el-button type="primary" @click="onSubmit">{{
              $language.local("确定")
            }}</el-button>
          </span>
        </el-dialog>
      </el-col>
    </el-row>
    <el-table
      :data="menus"
      style="width: 100%; margin-bottom: 20px"
      row-key="id"
      stripe
      :tree-props="{ children: 'children' }"
      size="mini"
      class="mt-1"
      height="100%"
    >
      <el-table-column
        prop="title"
        :label="$language.local('title')"
        align="left"
        header-align="center"
      >
        <template slot-scope="scope">
          <i :class="'iconfont ' + scope.row.icon_url"></i>
          {{ scope.row.title }}
        </template>
      </el-table-column>
      <el-table-column
        prop="name"
        :label="$language.local('name')"
        align="left"
        header-align="center"
        width="120px"
      >
      </el-table-column>
      <!-- <template v-for="(item, key) in columns">
        <el-table-column
          :key="key"
          :prop="key"
          :label="$language.local(key)"
          align="left"
          header-align="center"
        >
        </el-table-column>
      </template> -->

      <el-table-column
        prop="icon_url"
        :label="$language.local('icon_url')"
        align="center"
      >
        <!-- <template slot-scope="scope">
          {{}}
          <xy-input
            v-model="scope.row.icon_url"
            @change="onChange(scope.row)"
          ></xy-input>
        </template> -->
      </el-table-column>
      <el-table-column
        prop="sort_id"
        :label="$language.local('sort_id')"
        align="center"
        width="80"
      >
        <template slot-scope="scope">
          <xy-input
            v-model="scope.row.sort_id"
            @change="onChange(scope.row)"
          ></xy-input>
        </template>
      </el-table-column>
      <el-table-column
        :label="$language.local('Operate')"
        align="center"
        width="160px"
      >
        <template slot-scope="scope">
          <el-row class="center">
            <el-col :span="8" class="center">
              <slot :scope="scope">
                <el-button type="text" size="mini" @click="onEdit(scope.row)">
                  {{ $language.local("修改") }}
                </el-button>
              </slot>
            </el-col>
            <el-col :span="8" class="center">
              <delete-row api="/api/nav/Delete/" :row="scope.row"></delete-row>
            </el-col>
          </el-row>
        </template>
      </el-table-column>
    </el-table>
    <!-- <el-tree
      :data="menus"
      node-key="id"
      :expand-on-click-node="false"
      :props="treeProps"
      accordion
      highlight-current
    >
      <span class="custom-tree-node" slot-scope="{ node, data }">
        <span>{{ data.title }}</span>
        <span>
          <el-button type="text" size="mini" @click="onEdit(node, data)">
            {{ $language.local("Edit") }}
          </el-button>
          <el-button type="text" size="mini" @click="onDelete(node, data)">
            {{ $language.local("Delete") }}
          </el-button>
        </span>
      </span>
    </el-tree> -->
  </div>
</template>

<script>
import API from "../../plugins/api";
export default {
  inject: ["reload"],
  data() {
    return {
      api: new API("/api/nav/GetList"),
      searchInput: "",
      columns: {
        //  id: 241,
        // parent_id: 233,
        //  channel_id: 0,
        // nav_type: "System",
        title: "任务管理",
        name: "ProjectMana",
        // sub_title: "项目管理",
        // link_url: "#",
        // sort_id: 0,
        // is_lock: 0,
        // remark: "",
        // action_type: "Show",
        // is_sys: 0,
      },
      addForm: {
        parent_id: 233,
        channel_id: 0,
        nav_type: "System",
        name: "",
        title: "",
        sub_title: "",
        icon_url: "",
        link_url: "",
        sort_id: "",
        is_lock: 0,
        remark: "",
        action_type: "Show,View,Add,Edit,Delete,Check",
        is_sys: 0,
      },
      addDialogVisible: false,
      menus: [],
      treeProps: {
        label: "title",
        children: "subMenus",
      },
    };
  },
  async created() {
    // this.api.getList = "GetRoleList";
    await this.getData();
  },
  methods: {
    async getData() {
      // let data = {
      //   hostname: window.location.hostname,
      // };
      // let response = await this.$http.get("/api/Login/GetNavigation", data);
      // console.log(response);
      // this.menus = response.data.Data;
      // console.log(this.menus);
      let response = await this.$http.get("/api/nav/GetList");
      console.log(response);

      let { nav } = this.$common.combNav(response.data.Data);
      console.log({ nav });
      this.menus = nav[0].children;
      // this.menus = response.data.Data;
      // console.log(this.menus);
    },
    onAdd() {
      this.addDialogVisible = true;
    },
    onSearch() {},
    onClear() {
      console.log(123);
    },
    onEdit(row) {
      console.log(row);
      // Object.assign(this.addForm, row);
      this.addForm = row;
      this.addDialogVisible = true;
    },
    onDelete(node, data) {
      console.log(node);
      console.log(data);
    },
    async onChange(e) {
      const response = await this.$http.post(this.api.edit, e);
      this.$message.success(response.data.Message);
    },
    async onSubmit() {
      await this.$refs.dlgFormRef.validate();
      let response = null;
      if (this.addForm.id) {
        response = await this.$http.post("/api/nav/Edit", this.addForm);
      } else {
        response = await this.$http.post("/api/nav/Create", this.addForm);
      }
      console.log(response);
      this.addDialogVisible = false;
      this.reload();
      // for (const key in this.addForm) {
      //   if (Object.hasOwnProperty.call(this.addForm, key)) {
      //     this.addForm[key] = null;
      //   }
      // }
    },
  },
};
</script>

<style lang="less" scoped>
// .custom-tree-node {
//   flex: 1;
//   display: flex;
//   align-items: center;
//   justify-content: space-between;
//   font-size: 14px;
//   padding-right: 8px;
// }
</style>
